<template>
  <nav>
    <tabs 
      v-model="active" 
      class="topTab"
      color="#000" 
      title-inactive-color="#9e9e9e"
      title-active-color="#000"
      line-width="0.9rem"
      line-height="0.02rem"
      >
      <tab 
        v-for="{title,to} in tabs" 
        :key="title"
        :title="title"
        class="single"
        :to="to">
      </tab>
    </tabs>
  </nav> 
</template>

<script>
import { Tab, Tabs } from "vant";
import Vue from "vue";
Vue.use(Tab).use(Tabs);

export default {
  name: "TabBar",
  data() {
    const tabs = [
      {
        title:"音单",
        to:"/home/albums"
      },{
        title:"推荐",
        to:"/home/recommend"
      },{
        title:"分类",
        to:"/home/catalogs"
      }]

      const path = this.$route.path;
      const active = tabs.findIndex(function({to}){
          return path.includes(to);
      });
      return {
        tabs,
        active
      };
    },
  components:{
    Tab,Tabs
  },
  methods:{
  }
};
</script>

<style lang="scss" scoped>
nav{
  z-index: 600;
  width:100%;
  height: 0.44rem;
  border-bottom:1px solid #e0e0e0;
  .topTab{
    width:100%;
    height:0.4rem;
    font-size:0.14rem;
    z-index: 600;
  }
}

</style>
